<template>
  <a-input-group compact>
    <a-input
      :style="props.rightStyle"
      v-model:value="inputVal"
      :placeholder="props.ipnutPlaceholder"
      :disabled="props.disabled"
      @change="handleUpdate"
    />
    <a-form-item-rest>
      <a-checkbox-group
        v-model:value="checkValue"
        :style="`height: 32px; line-height: 32px;padding-left:10px;${props.leftStyle}`"
        :options="options"
        @change="handleUpdate"
        :disabled="props.disabled"
      />
    </a-form-item-rest>
  </a-input-group>
</template>

<script setup lang="ts">
  import { CheckboxGroup, InputGroup, Form } from 'ant-design-vue';

  import { ref, watch, computed } from 'vue';
  const ACheckboxGroup = CheckboxGroup;
  const AInputGroup = InputGroup;
  const AFormItemRest = Form.ItemRest;
  const emit = defineEmits(['change']);

  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
    ipnutPlaceholder: {
      type: String,
      default: '请输入',
    },
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Array,
      default: () => [undefined, ''],
    },
    leftStyle: {
      type: String,
      default: 'width: 30%;',
    },
    rightStyle: {
      type: String,
      default: 'width: 70%;',
    },
    fieldNames: {
      type: Object,
      default: () => {
        return { key: 'index', label: 'label', value: 'value' };
      },
    },
  });

  let checkValue = ref<string | undefined>(undefined);

  let inputVal = ref('');
  function handleUpdate() {
    emit('change', [checkValue.value, inputVal.value]);
  }
  let options = computed(() => {
    return props.options.map((item) => {
      return {
        label: item[props.fieldNames.label],
        value: item[props.fieldNames.value],
      };
    });
  });
  watch(
    () => props.value,
    (v) => {
      inputVal.value = v.length >= 1 ? (v[1] as string) : '';
      checkValue.value = v.length > 0 ? (v[0] as string | undefined) : undefined;
    },
    { immediate: true },
  );
</script>
